<template>
  <div id="app">
    <mt-header fixed title="掌游宝" class="head">


      <mt-button  style="height: 100%; padding-top: 10%" @click.native="changeSlide" slot="left"><img style="margin-left: 20%"  src="./assets/left.png"></mt-button>
      <mt-button  style="height: 100%; padding-top: 10%; padding-left:50%" slot="right"><img  src="./assets/right.png"></mt-button>

    </mt-header>



    <mt-popup v-model="popupVisible" position="left" class="sslide">
      <div class="slideLeft">
          <div class="userName">
            <img class="img-circle" src="./assets/100x100.png" alt="">
            <div class="login" @click="signIn()" v-bind:class="{'isnone':login}">
              登录
            </div>
            <div class="name" v-bind:class="{'isnone':nameStyle}">
              {{name}}
              <div class="signOut" @click="signOut()">
                注销
              </div>
            </div>
          </div>
          <div class="cell">
            <img src="./assets/100x100.png" alt="">
            <div class="stitle">
              下载管理
            </div>
          </div>
          <div class="cell">
            <img src="./assets/100x100.png" alt="">
            <div class="stitle">
              我的评论
            </div>
          </div>
          <div class="cell">
            <img src="./assets/100x100.png" alt="">
            <div class="stitle">
              我的动态
            </div>
          </div>
          <div class="cell">
            <img src="./assets/100x100.png" alt="">
            <div class="stitle">
              私信
            </div>
          </div>
          <div class="cell">
            <img src="./assets/100x100.png" alt="">
            <div class="stitle">
              修改资料
            </div>
          </div>
      </div>
    </mt-popup>


    <router-view></router-view>



  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
     popupVisible:false
    }
  },
  methods:{

     signOut(){
    //   var _this = this;
    //   _this.$http.post('/users/logout').then(function (res) {
    //     if (res.data.result == 0) {
    //       console.log('用户未登录')
    //     } else if (res.data.result == 1) {
    //       console.log(res.data);
    //       _this.$store.commit('logout');
    //     }
    //   })
     },
    changeSlide(){
      this.popupVisible=!this.popupVisible;
     
    },
    signIn(){
      this.popupVisible=false;
      this.$router.push({path: 'signIn'})
    }
  },
  computed:{
    login(){
      return this.$store.state.login;
    },
    name(){
      return this.$store.state.name;
    },
    nameStyle(){
      return this.$store.state.nameStyle;
    }

  }
 
}
</script>

<style>
#app {

  font-family: '幼圆', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.head{
  font-size:350%;
  height:6%;
  background-color:rgba(0, 0, 0, 0);
  padding:0px;
}
.mint-header-title{
  
}
.signIn{
  margin-left: 5%;
}
.sslide{
  background-color: rgba(0, 0, 0, 0.7);
  width:60%;
}
.sslide .slideLeft{
  color:#fff;
  width:100%;
  height: 100vh;
  padding-top: 50%;
  text-align: left;
}
.sslide .slideLeft .userName{
  margin-left: 8%;
  margin-bottom: 55%;
}
.sslide .slideLeft .userName img{
  width: 30%;
  float: left;
}
.sslide .slideLeft .userName .login{
  font-size: 500%;
  float: left;
  margin-left: 8%;
  margin-top: 3%;

}
.sslide .slideLeft .userName .signOut{
  font-size: 50%;
  float: left;
  margin-left: 1%;
  margin-top: 15%;
  color:#fff

}
.sslide .slideLeft .userName .name{
  line-height: 100%;
  font-size: 450%;
  float: left;
  margin-left: 8%;
  margin-top: 3%;

}
.isnone{
  display:none;
}
.sslide .slideLeft .cell{
  padding-left: 8%;
  font-size: 550%;
  float: left;
  width: 100%;
  margin-bottom: 10%;
}
.sslide .slideLeft .cell .stitle{
  font-size: 65%;
  float: left;
  margin-left: 15%;
  line-height: 100%;
}
.sslide .slideLeft .cell img{
  
  width: 10%;
  float: left;
}
</style>
